<template>
	<view class="promotion">
		<view class="promotion-container">
			<view class="left">
				<navigator :url="list.imgList.list[0].info[3].value" hover-class="none">
					<image :src="list.imgList.list[0].img"></image>
				</navigator>
			</view>
			<view class="right">
				<navigator :url="list.imgList.list[1].info[3].value" hover-class="none">
					<image :src="list.imgList.list[1].img"></image>
				</navigator>
				<navigator :url="list.imgList.list[2].info[3].value" hover-class="none">
					<image :src="list.imgList.list[2].img"></image>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Object,
				default: () => {}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.promotion {
		&-container {
			display: flex;
			justify-content: space-between;
			height: 260rpx;
			padding: 30rpx;
		}
		.left {
			image {
				width: 260rpx;
				height: 260rpx;
			}
		}
		.right {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			image {
				width: 416rpx;
				height: 124rpx;
			}
		}
	}
</style>
